<template>
  <div class="log-div">
    <el-form
      :model="searchParam"
      label-width="70px"
      size="small"
      :inline="true"
    >
      <el-form-item label="操作模块" style="width: 30%">
        <el-input placeholder="操作模块" v-model="searchParam.title" />
      </el-form-item>
      <el-form-item label="操作人" style="width: 30%">
        <el-input placeholder="操作人" v-model="searchParam.operName" />
      </el-form-item>
      <!-- 日期 -->
      <el-form-item class="block" style="width: 30%">
        <span class="demonstration">创建时间</span>
        <el-date-picker
          v-model="datas"
          value-format="YYYY-MM-DD"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :shortcuts="shortcuts"
        />
      </el-form-item>
    </el-form>

    <el-row style="display: flex; margin-bottom: 10px">
      <el-button type="primary" @click="loadData" size="small">搜索</el-button>
      <el-button size="small" @click="resetData">重置</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table :data="logList" style="width: 100%">
      <el-table-column prop="title" label="系统模块" width="100" />
      <el-table-column prop="requestMethod" label="请求方式" width="100" />
      <el-table-column prop="operName" label="操作人员" width="100" />
      <el-table-column prop="operIp" label="操作IP" width="150" />
      <el-table-column prop="method" label="请求方法" width="900" />
      <el-table-column prop="status" label="状态" width="80">
        <template #default="scope">
          <span>{{ +scope.row.status === 0 ? '禁用' : '正常' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operTime" label="操作时间" width="100" />
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)" type="primary">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 5, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="loadData"
      @current-change="loadData"
      style="margin-top: 20px"
    />

    <!-- 详情弹框 -->
    <el-dialog v-model="dialogVisible" title="详情" width="60%">
      <el-row>
        <span class="log">操作模块{{ sysLog.title }}</span>
        <span class="log">请求地址{{ sysLog.operUrl }}</span>
      </el-row>
      <el-row>
        <span class="log">操作人员{{ sysLog.operName }}</span>
        <span class="log">请求IP{{ sysLog.operIp }}</span>
      </el-row>
      <el-row>
        <span class="log">操作方法{{ sysLog.method }}</span>
      </el-row>
      <el-row>
        <span class="log">请求参数{{ sysLog.operParam }}</span>
      </el-row>
      <el-row>
        <span class="log">返回参数{{ sysLog.jsonResult }}</span>
      </el-row>
      <el-row>
        <span class="log">操作状态{{ sysLog.status }}</span>
        <span class="log">操作时间{{ sysLog.operTime }}</span>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { GetLogList, GetLog } from '@/api/sysOperLog.js'

//查询参数
let pageSize = ref(5)
let pageNum = ref(1)
let total = ref(0)
let searchParam = ref({
  title: '',
  operName: '',
  beginTime: '',
  endTime: '',
})

// 表格
const logList = ref([])

//日期选择器数据变量
const datas = ref([])

//页面挂载时加载数据
const loadData = async () => {
  //验证时间有没有值
  if (datas.value && datas.value.length === 2) {
    searchParam.value.beginTime = datas.value[0]
    searchParam.value.endTime = datas.value[1]
  }
  const { data } = await GetLogList(
    pageNum.value,
    pageSize.value,
    searchParam.value
  )
  logList.value = data.list
  total.value = data.total
}

onMounted(() => {
  loadData()
})
//重置
const resetData = () => {
  searchParam.value = {}
  datas.value = []
  loadData()
}
//查看详情
const sysLog = ref({})
const handleEdit = async row => {
  dialogVisible.value = true
  const { data } = await GetLog(row.id)
  sysLog.value = data
}

//弹框
const dialogVisible = ref(false)

//时间选择器
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
</script>

<style>
.log-div {
  background: #fff;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
}
.post-div {
  margin: 10px, 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background: #fff;
}
.block {
  margin-left: 30px;
}
.log {
  margin-right: 300px;
  margin-top: 10px;
}
</style>
